<template>
  <div>
    <dir>
      <q-btn-toggle
        v-model="timelineSettings.timelineViewMode"
        push
        glossy
        toggle-color="teal"
        :options="[
          {label: '日', value: 'Day'},
          {label: '周', value: 'Week'},
          {label: '月', value: 'Month', slot: 'two'},
          {label: '年', value: 'Year', slot: 'three'}
        ]"
      >
      </q-btn-toggle>
      <strong>集成测试->展示不同timeline</strong>
    </dir>
    <ejs-gantt ref="gantt" :dataSource="data" id="GanttContainer" :taskFields="taskFields" :height="height"
      :selectionSettings="selectionSettings" :sortSettings="sortSettings" :allowSorting= 'true'
      :timelineSettings="timelineSettings" :eventMarkers="eventMarkers"
      :resourceNameMapping="resourceNameMapping" :resourceIDMapping="resourceIdMapping" :resources="resources"
      :labelSettings="labelSettings" :editSettings="editSettings" :toolbar="toolbar"
    ></ejs-gantt>
  </div>
</template>

<script>
// import { Gantt, ProjectModel } from '../../../lib/gantt/build/gantt.module'
import { Selection, Sort, DayMarkers, Edit, Toolbar } from '@syncfusion/ej2-vue-gantt'
export default {
  components: {
  },
  data () {
    return {
      data: [
        {
          TaskID: 1,
          TaskName: 'Project Estimation',
          StartDate: new Date('03/12/2019'),
          EndDate: new Date('04/21/2019'),
          subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('03/22/2019'), Duration: 0, Progress: 50, resources: [1, 3] },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '3FS', Progress: 50 }
          ]
        },
        {
          TaskID: 5,
          TaskName: '集成测试->双击可以进行编辑',
          StartDate: new Date('04/02/2019'),
          EndDate: new Date('05/21/2019'),
          resources: [2],
          Predecessor: '4FS',
          subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '6FS', Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 1, Predecessor: '6FS', Progress: 50 }
          ]
        }
      ],
      height: '450px',
      taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        child: 'subtasks',
        resourceInfo: 'resources'
      },
      // 选择 设置
      selectionSettings: {
        mode: 'Both'
      },
      // 排序设置
      sortSettings: { columns: [{ field: 'TaskID', direction: 'Ascending' }, { field: 'TaskName', direction: 'Ascending' }] },
      // timeline
      timelineSettings: {
        timelineViewMode: 'Week'
      },
      // 事件标注
      eventMarkers: [
        {
          day: '04/12/2019',
          cssClass: 'e-custom-event-marker',
          label: '集成测试->事件标注'
        }
      ],
      // 分配资源 须在数据源data里加入 resources：Array 字段, 并结合labelSettings.rightLabel
      resourceNameMapping: 'resourceName',
      resourceIdMapping: 'resourceId',
      resources: [
        { resourceId: 1, resourceName: '集成测试->资源分配-1' },
        { resourceId: 2, resourceName: '集成测试->资源分配-2' },
        { resourceId: 3, resourceName: '集成测试->资源分配-3' }
      ],
      labelSettings: {
        leftLabel: 'TaskName',
        rightLabel: 'resources'
      },
      // edit设置
      editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
      },
      // toolbar
      toolbar: ['Add', 'Edit', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'PrevTimeSpan', 'NextTimeSpan', 'Update']
    }
  },
  provide: {
    gantt: [ Selection, Sort, DayMarkers, Edit, Toolbar ]
  },
  mounted () {
  },
  watch: {
    'timelineSettings.timelineViewMode' (ewnV) {
      this.timelineSettings = {
        timelineViewMode: ewnV
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
